import React, { useState, useEffect, useRef } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import axios from "axios";
import px2rem from "../uills/px2rem";
import {
    Card,
    List,
    NavBar,
    ProductCard,
    Stepper,
    SubmitBar,
    Cell,
    Field,
    Button,
    DatetimePicker,
    Popup,
    // Cell
    Radio,
    Toast,Dialog ,
} from 'react-vant';
import {
    Arrow,
    Clock,
    Friends,
    Location,
    GoldCoin,
    Edit,
    VipCard,
    Wechat,

} from '@react-vant/icons';
import './order.css';

export default function Order() {
    const [pricelist, setpricelist] = useState([

    ])
    const getvipprice = () => {
        axios.get(`http://localhost:3010/vipPrice`).then(res => {
            console.log(res.data.price);
            setpricelist(res.data.price)

        })
    }
    const [isTotal, setIstotal] = useState(false)
    useEffect(() => {
        getvipprice()
    }, [])
    let alipayForm = useRef();
    const location = useLocation();
    const navigate = useNavigate();
    const [orderInfo, setOrderInfo] = useState({
        diningTime: new Date(),
        peopleCount: '1-2',
        tableLocation: '请选择几',
        remark: '',
        isMember: false,
        payMethod: '支付宝支付'
    });
    const [popup, setPopup] = useState('')

    const onClose = () => setPopup('')
    const [foodList, setFoodList] = useState([]);
    const [foodlistshow, setFoodlistshow] = useState(false)
    useEffect(() => {
        console.log(location.state.list, 'location');
        if (location.state && location.state.list) {
            setFoodList(location.state.list);
            setFoodlistshow(true)
        }
    }, [location]);

    // 计算总价
    const totalPrice = foodList.reduce((sum, item) => {
        return sum + item.price * item.num;
    }, 0);

    // 更新商品数量
    const updateFoodCount = (index, value) => {
        // 如果数量为0，删除这条商品数据
        if (value === 0) {
            const newList = [...foodList];
            newList.splice(index, 1);
            setFoodList(newList);
        } else {
            const newList = [...foodList];
            newList[index].num = value;
            setFoodList(newList);
        }
    };
    useEffect(() => {

        if (foodlistshow) {
            console.log(foodList, 'foodlist', foodList.length);
            if (foodList.length < 1) {
                console.log(foodList, 'foodlist');
                navigate('/food')
            }
        }


    }, [foodList])
    const [value, setValue] = React.useState(new Date())
    const [timeValue, setTimeValue] = useState(0)
    const handelTimeValue = (value) => {
        console.log(value);
        setOrderInfo(prev => ({
            ...prev,
            diningTime: value

        }))
        setPopup('')

    }
    useEffect(() => {
        console.log(value);
        console.log(timeValue);

    }, [value])
    const [Numberpeople, setNumberpeople] = useState([
        '1-2', '3-6', '7-9', '10-12', '13-16', '17-20'
    ])

    const [postion, setPositon] = useState([
        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20
    ])
    const [checkedradio, setcheckedradio] = useState(1)
    const checkRaiod = (event) => {
        if (event == 2) {
            setIstotal(true)  // 选择会员卡支付时开启优惠
        } else {
            setIstotal(false)
        }
        setcheckedradio(event)
    }
    const Confirmselection = () => {
        checkedradio == 1 ? setOrderInfo(prev => ({
            ...prev,
            payMethod: "支付宝支付"
        })) : checkedradio == 2 ? setOrderInfo(prev => ({
            ...prev,
            payMethod: "会员卡支付"
        })) : setOrderInfo(prev => ({
            ...prev,
            payMethod: "账户余额支付"
        }))
        setPopup('')
    }
    return (

        <div className="order-page">
            <div ref={alipayForm}>{/* form表单 */}</div>
            <Popup
                visible={popup === 'bottom'}
                style={{ height: '30%' }}
                position='bottom'
                onClose={onClose}
            >
                <DatetimePicker
                    type='datetime'
                    minDate={new Date()}
                    // maxDate={new Date(2025, 10, 1)}
                    value={value}
                    // onChange={setValue}
                    onConfirm={handelTimeValue}
                />
            </Popup>
            <Popup
                visible={popup === 'number'}
                style={{ height: '30%' }}
                position='bottom'
                onClose={onClose}
            >
                <div style={{ display: "flex", justifyContent: "space-around", flexWrap: "wrap", marginTop: "45px" }} >
                    {Numberpeople.map(e => (
                        <Button style={{ width: "100px", borderRadius: "6px", marginBottom: "20px" }} color='linear-gradient(to right, rgb(0, 148, 255), rgb(100, 188,255)'
                            onClick={() => setOrderInfo(prev => ({
                                ...prev,
                                peopleCount: e
                            }))}>{e}人</Button>
                    ))}


                </div>

            </Popup >
            <Popup
                visible={popup === 'position'}
                style={{ height: '30%' }}
                position='bottom'
                onClose={onClose}
            >
                <div style={{ display: "flex", justifyContent: "space-around", flexWrap: "wrap", marginTop: "45px" }} >
                    {postion.map(e => (
                        <Button style={{ width: "80px", borderRadius: "6px", marginBottom: "20px" }} color='linear-gradient(to right, rgb(0, 148, 255), rgb(100, 188,255)' onClick={() => setOrderInfo(prev => ({
                            ...prev,
                            tableLocation: e
                        }))}>{e}号桌</Button>
                    ))}

                </div>

            </Popup>

            <Popup
                visible={popup === 'payment'}
                style={{ height: '30%' }}
                position='bottom'
                onClose={onClose}
            >
                <Radio.Group defaultValue="1">
                    <Cell.Group>
                        <Cell title={(<p className="foodicon"><svg style={{ width: px2rem("58px"), height: px2rem("58px") }} t="1744860834625" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2626" width="200" height="200"><path d="M1024.0512 701.0304V196.864A196.9664 196.9664 0 0 0 827.136 0H196.864A196.9664 196.9664 0 0 0 0 196.864v630.272A196.9152 196.9152 0 0 0 196.864 1024h630.272a197.12 197.12 0 0 0 193.8432-162.0992c-52.224-22.6304-278.528-120.32-396.4416-176.64-89.7024 108.6976-183.7056 173.9264-325.3248 173.9264s-236.1856-87.2448-224.8192-194.048c7.4752-70.0416 55.552-184.576 264.2944-164.9664 110.08 10.3424 160.4096 30.8736 250.1632 60.5184 23.1936-42.5984 42.496-89.4464 57.1392-139.264H248.064v-39.424h196.9152V311.1424H204.8V267.776h240.128V165.632s2.1504-15.9744 19.8144-15.9744h98.4576V267.776h256v43.4176h-256V381.952h208.8448a805.9904 805.9904 0 0 1-84.8384 212.6848c60.672 22.016 336.7936 106.3936 336.7936 106.3936zM283.5456 791.6032c-149.6576 0-173.312-94.464-165.376-133.9392 7.8336-39.3216 51.2-90.624 134.4-90.624 95.5904 0 181.248 24.4736 284.0576 74.5472-72.192 94.0032-160.9216 150.016-253.0816 150.016z" fill="#009FE8" p-id="2627" className="foodicon" ></path>
                        </svg> <span>支付宝支付</span></p>)} value={(<p style={{ display: "flex", justifyContent: "end", margin: "0px" }}><Radio name="1" checkedColor="rgb(0, 148, 255)" onClick={() => checkRaiod(1)}></Radio></p>)} />

                    </Cell.Group>
                    <Cell.Group>
                        <Cell title={(<p className="foodicon"><svg style={{ width: px2rem("58px"), height: px2rem("58px") }} className="foodicon" t="1744860963998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11980" width="200" height="200"><path d="M77.925279 333.206918c0 0 651.241274 0 868.322381 0 13.072737 0.001023 13.072737-10.099009 13.072737-10.099009l0-92.621491c0-24.923646-20.394493-45.318138-45.318138-45.318138L109.426737 185.16828c-24.923646 0-45.319162 20.394493-45.319162 45.318138 0 0 0 68.728314 0 86.37216C64.107575 333.206918 77.925279 333.206918 77.925279 333.206918z" p-id="11981"></path><path d="M940.445514 429.637154c-92.417853 0-659.830907 0-862.071004 0-14.266935 0-14.266935 11.330046-14.266935 11.330046l0 350.287945c0 24.925692 20.394493 45.318138 45.319162 45.318138l804.581662 0c24.923646 0 45.319162-20.392446 45.319162-45.318138l0-343.145268C959.32756 448.109878 959.32756 429.637154 940.445514 429.637154zM201.592856 571.3272c0 8.838296-7.230682 16.07614-16.068977 16.07614l-58.44511 0c-8.840342 0-16.074094-7.240915-16.074094-16.07614l0-55.973826c0-8.838296 7.233752-16.070001 16.074094-16.070001l58.44511 0c8.838296 0 16.068977 7.231705 16.068977 16.070001L201.592856 571.3272zM325.559239 571.3272c0 8.838296-7.231705 16.07614-16.071024 16.07614l-58.44204 0c-8.839319 0-16.07307-7.240915-16.07307-16.07614l0-55.973826c0-8.838296 7.234775-16.070001 16.07307-16.070001l58.44204 0c8.839319 0 16.071024 7.231705 16.071024 16.070001L325.559239 571.3272zM562.128189 780.362051l-43.138496 0-61.412698-179.14817 41.173748 0 38.743396 126.642329c1.925862 6.246261 3.123131 12.142551 3.584642 17.693987l0.694825 0c0.61603-5.704932 1.925862-11.755742 3.932566-18.157545l38.743396-126.178771 39.901779 0L562.128189 780.362051zM723.443202 630.936833l-15.381315 0L708.061886 750.639099l15.381315 0 0 29.722952-68.698638 0L654.744563 750.639099l15.150048 0L669.894611 630.936833l-15.150048 0 0-29.722952 68.698638 0L723.443202 630.936833zM881.463168 702.007495c-13.455453 11.063987-30.28577 16.363689-50.483788 15.901155l-19.661805 0 0 62.453401-38.166251 0L773.151323 601.213881l61.643965 0c44.563962 0 66.848501 18.891256 66.848501 56.670697C901.64379 676.234505 894.915551 690.943508 881.463168 702.007495z" fill="#ff7c39" p-id="11982"></path><path d="M828.202127 630.820176l-16.884552 0 0 57.828057 16.538675 0c22.437012 0 33.655518-9.754155 33.655518-29.261441C861.511767 640.34511 850.408895 630.820176 828.202127 630.820176z" p-id="11983"></path>
                        </svg> <span>会员卡支付</span></p>)} value={(<p style={{ display: "flex", justifyContent: "end", margin: "0px" }}><Radio name="2" checkedColor="rgb(0, 148, 255)" onClick={() => checkRaiod(2)}></Radio></p>)} />

                    </Cell.Group>
                    <Cell.Group>
                        <Cell title={(<p className="foodicon"><svg style={{ width: px2rem("58px"), height: px2rem("58px") }} className="foodicon" t="1744860992014" class="icon" viewBox="0 0 1027 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13031" width="200" height="200"><path d="M514.591468 0c-282.099783 0-510.889371 228.789588-510.889371 510.889371s228.789588 510.889371 510.889371 510.889371 510.889371-228.789588 510.889371-510.889371-228.789588-510.889371-510.889371-510.889371z m-20.731743 297.64859c18.510484-8.885033 37.761388-17.770065 56.271873-26.655098 18.510484-8.885033 32.578453-15.548807 42.944324-20.731742 15.548807-7.404194 29.616775-11.106291 42.203904-10.365871 12.587129 0.740419 22.953001 2.221258 31.097614 5.923355 9.625452 4.442516 18.510484 10.365871 25.914679 17.770065l39.242227 66.637744H425.000723c23.69342-11.106291 46.646421-22.212581 68.859002-32.578453z m309.4953 194.730296H658.973247c-16.289226 0-29.616775 5.182936-40.723066 16.289227-11.106291 10.365871-17.029646 25.174259-17.029646 40.723066 0.740419 11.106291 2.961678 20.731743 6.663774 29.616775 3.702097 7.404194 8.885033 14.067968 17.029646 19.991323 8.144613 5.923355 19.250904 8.885033 34.059292 8.885032h144.381778v115.505423c0 7.404194-1.480839 15.548807-4.442516 22.212582-2.961678 6.663774-6.663774 13.327549-11.84671 18.510484-10.365871 11.106291-25.174259 17.029646-39.982646 17.029646H285.80188c-8.144613 0-15.548807-1.480839-22.953001-4.442516-7.404194-2.961678-13.327549-7.404194-19.250904-12.58713-5.182936-5.182936-9.625452-11.106291-13.327548-18.510484-2.961678-7.404194-4.442516-14.808388-4.442517-22.953001V406.490239c0-16.289226 5.923355-29.616775 17.029646-40.723066 11.106291-11.106291 25.174259-17.029646 40.723066-17.029646h461.281272c16.289226 0 29.616775 5.923355 40.723066 17.029646 11.106291 11.106291 17.029646 25.174259 17.029646 40.723066v85.888647z m-125.871294 62.935648c0 7.404194-2.961678 14.067968-8.144613 19.250903-5.182936 5.182936-11.84671 8.144613-19.250904 8.144614s-14.067968-2.961678-19.250904-8.144614c-5.182936-5.182936-8.144613-11.84671-8.144613-19.250903s2.961678-14.067968 8.144613-19.250904c5.182936-5.182936 11.84671-8.144613 19.250904-7.404194 7.404194 0 14.067968 2.961678 19.250904 7.404194 5.182936 5.182936 8.144613 12.587129 8.144613 19.250904z" fill="#F97D1D" p-id="13032"></path>
                        </svg> <span>账户余额支付</span></p>)} value={(<p style={{ display: "flex", justifyContent: "end", margin: "0px" }}><Radio name="3" checkedColor="rgb(0, 148, 255)" onClick={() => checkRaiod(3)}></Radio></p>)} />
                    </Cell.Group>
                    <Button style={{ backgroundColor: "rgb(0, 148, 255)", margin: "5px 80px", display: "inline-block", color: "white", width: px2rem("400px"), borderRadius: "22px" }} onClick={Confirmselection}>确认选择</Button>
                </Radio.Group>
            </Popup>


            <NavBar
                className="foodtop"
                title="确认订单"
                leftText="返回"
                onClickLeft={() => navigate(-1)}
            />

            <div className="order-content">
                {/* 食品列表 */}
                <Card round className="food-list-card">
                    {foodList.map((item, index) => (
                        <ProductCard
                            key={index}
                            price={item.price}
                            desc={item.name}
                            title=""
                            thumb={item.img}
                            num={
                                <Stepper
                                    value={item.num}
                                    onChange={(val) => updateFoodCount(index, val)}
                                    theme="round"
                                    buttonSize="18"
                                />
                            }
                        />
                    ))}
                </Card>

                {/* 订单信息 */}
                <Card round className="order-info-card">
                    <Cell
                        icon={<Clock />}
                        title="就餐时间"
                        value={orderInfo.diningTime.toLocaleString()}
                        isLink
                        onClick={() => { setPopup('bottom') }}
                    />
                    <Cell
                        icon={<Friends />}
                        title="就餐人数"
                        value={`${orderInfo.peopleCount}人`}
                        isLink
                        onClick={() => { setPopup('number') }}
                    />
                    <Cell
                        icon={<Location />}
                        title="就餐位置"
                        value={`${orderInfo.tableLocation}号桌`}
                        isLink
                        onClick={() => { setPopup('position') }}
                    />
                </Card>

                {/* 其他选项 */}
                <Card round className="order-options-card">
                    <Cell
                        icon={<Edit />}
                        title="备注"
                        value="请填写"
                        isLink
                        onClick={() => { }}
                    />
                    {/* <Cell
                        icon={<VipCard />}
                        title="会员折扣"
                        value="暂未开通会员"
                        isLink
                        onClick={() => { }}
                    /> */}
                    {orderInfo.payMethod == '支付宝支付' ? <Cell
                        icon={<svg style={{ width: px2rem("58px"), height: px2rem("58px") }} t="1744860834625" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2626" width="200" height="200"><path d="M1024.0512 701.0304V196.864A196.9664 196.9664 0 0 0 827.136 0H196.864A196.9664 196.9664 0 0 0 0 196.864v630.272A196.9152 196.9152 0 0 0 196.864 1024h630.272a197.12 197.12 0 0 0 193.8432-162.0992c-52.224-22.6304-278.528-120.32-396.4416-176.64-89.7024 108.6976-183.7056 173.9264-325.3248 173.9264s-236.1856-87.2448-224.8192-194.048c7.4752-70.0416 55.552-184.576 264.2944-164.9664 110.08 10.3424 160.4096 30.8736 250.1632 60.5184 23.1936-42.5984 42.496-89.4464 57.1392-139.264H248.064v-39.424h196.9152V311.1424H204.8V267.776h240.128V165.632s2.1504-15.9744 19.8144-15.9744h98.4576V267.776h256v43.4176h-256V381.952h208.8448a805.9904 805.9904 0 0 1-84.8384 212.6848c60.672 22.016 336.7936 106.3936 336.7936 106.3936zM283.5456 791.6032c-149.6576 0-173.312-94.464-165.376-133.9392 7.8336-39.3216 51.2-90.624 134.4-90.624 95.5904 0 181.248 24.4736 284.0576 74.5472-72.192 94.0032-160.9216 150.016-253.0816 150.016z" fill="#009FE8" p-id="2627" className="foodicon" ></path>
                        </svg>}
                        title={'支付宝支付'}
                        value={orderInfo.payMethod}
                        isLink
                        onClick={() => { setPopup('payment') }}
                    />
                        : orderInfo.payMethod == '会员卡支付' ? <Cell
                            icon={<svg style={{ width: px2rem("58px"), height: px2rem("58px") }} className="foodicon" t="1744860963998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11980" width="200" height="200"><path d="M77.925279 333.206918c0 0 651.241274 0 868.322381 0 13.072737 0.001023 13.072737-10.099009 13.072737-10.099009l0-92.621491c0-24.923646-20.394493-45.318138-45.318138-45.318138L109.426737 185.16828c-24.923646 0-45.319162 20.394493-45.319162 45.318138 0 0 0 68.728314 0 86.37216C64.107575 333.206918 77.925279 333.206918 77.925279 333.206918z" p-id="11981"></path><path d="M940.445514 429.637154c-92.417853 0-659.830907 0-862.071004 0-14.266935 0-14.266935 11.330046-14.266935 11.330046l0 350.287945c0 24.925692 20.394493 45.318138 45.319162 45.318138l804.581662 0c24.923646 0 45.319162-20.392446 45.319162-45.318138l0-343.145268C959.32756 448.109878 959.32756 429.637154 940.445514 429.637154zM201.592856 571.3272c0 8.838296-7.230682 16.07614-16.068977 16.07614l-58.44511 0c-8.840342 0-16.074094-7.240915-16.074094-16.07614l0-55.973826c0-8.838296 7.233752-16.070001 16.074094-16.070001l58.44511 0c8.838296 0 16.068977 7.231705 16.068977 16.070001L201.592856 571.3272zM325.559239 571.3272c0 8.838296-7.231705 16.07614-16.071024 16.07614l-58.44204 0c-8.839319 0-16.07307-7.240915-16.07307-16.07614l0-55.973826c0-8.838296 7.234775-16.070001 16.07307-16.070001l58.44204 0c8.839319 0 16.071024 7.231705 16.071024 16.070001L325.559239 571.3272zM562.128189 780.362051l-43.138496 0-61.412698-179.14817 41.173748 0 38.743396 126.642329c1.925862 6.246261 3.123131 12.142551 3.584642 17.693987l0.694825 0c0.61603-5.704932 1.925862-11.755742 3.932566-18.157545l38.743396-126.178771 39.901779 0L562.128189 780.362051zM723.443202 630.936833l-15.381315 0L708.061886 750.639099l15.381315 0 0 29.722952-68.698638 0L654.744563 750.639099l15.150048 0L669.894611 630.936833l-15.150048 0 0-29.722952 68.698638 0L723.443202 630.936833zM881.463168 702.007495c-13.455453 11.063987-30.28577 16.363689-50.483788 15.901155l-19.661805 0 0 62.453401-38.166251 0L773.151323 601.213881l61.643965 0c44.563962 0 66.848501 18.891256 66.848501 56.670697C901.64379 676.234505 894.915551 690.943508 881.463168 702.007495z" fill="#ff7c39" p-id="11982"></path><path d="M828.202127 630.820176l-16.884552 0 0 57.828057 16.538675 0c22.437012 0 33.655518-9.754155 33.655518-29.261441C861.511767 640.34511 850.408895 630.820176 828.202127 630.820176z" p-id="11983"></path>
                            </svg>}
                            title={'会员卡支付'}
                            value={orderInfo.payMethod}
                            isLink
                            onClick={() => { setPopup('payment') }}
                        />
                            : <Cell
                                icon={<svg style={{ width: px2rem("58px"), height: px2rem("58px") }} className="foodicon" t="1744860992014" class="icon" viewBox="0 0 1027 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13031" width="200" height="200"><path d="M514.591468 0c-282.099783 0-510.889371 228.789588-510.889371 510.889371s228.789588 510.889371 510.889371 510.889371 510.889371-228.789588 510.889371-510.889371-228.789588-510.889371-510.889371-510.889371z m-20.731743 297.64859c18.510484-8.885033 37.761388-17.770065 56.271873-26.655098 18.510484-8.885033 32.578453-15.548807 42.944324-20.731742 15.548807-7.404194 29.616775-11.106291 42.203904-10.365871 12.587129 0.740419 22.953001 2.221258 31.097614 5.923355 9.625452 4.442516 18.510484 10.365871 25.914679 17.770065l39.242227 66.637744H425.000723c23.69342-11.106291 46.646421-22.212581 68.859002-32.578453z m309.4953 194.730296H658.973247c-16.289226 0-29.616775 5.182936-40.723066 16.289227-11.106291 10.365871-17.029646 25.174259-17.029646 40.723066 0.740419 11.106291 2.961678 20.731743 6.663774 29.616775 3.702097 7.404194 8.885033 14.067968 17.029646 19.991323 8.144613 5.923355 19.250904 8.885033 34.059292 8.885032h144.381778v115.505423c0 7.404194-1.480839 15.548807-4.442516 22.212582-2.961678 6.663774-6.663774 13.327549-11.84671 18.510484-10.365871 11.106291-25.174259 17.029646-39.982646 17.029646H285.80188c-8.144613 0-15.548807-1.480839-22.953001-4.442516-7.404194-2.961678-13.327549-7.404194-19.250904-12.58713-5.182936-5.182936-9.625452-11.106291-13.327548-18.510484-2.961678-7.404194-4.442516-14.808388-4.442517-22.953001V406.490239c0-16.289226 5.923355-29.616775 17.029646-40.723066 11.106291-11.106291 25.174259-17.029646 40.723066-17.029646h461.281272c16.289226 0 29.616775 5.923355 40.723066 17.029646 11.106291 11.106291 17.029646 25.174259 17.029646 40.723066v85.888647z m-125.871294 62.935648c0 7.404194-2.961678 14.067968-8.144613 19.250903-5.182936 5.182936-11.84671 8.144613-19.250904 8.144614s-14.067968-2.961678-19.250904-8.144614c-5.182936-5.182936-8.144613-11.84671-8.144613-19.250903s2.961678-14.067968 8.144613-19.250904c5.182936-5.182936 11.84671-8.144613 19.250904-7.404194 7.404194 0 14.067968 2.961678 19.250904 7.404194 5.182936 5.182936 8.144613 12.587129 8.144613 19.250904z" fill="#F97D1D" p-id="13032"></path>
                                </svg>}
                                title={'账户余额支付'}
                                value={orderInfo.payMethod}
                                isLink
                                onClick={() => { setPopup('payment') }}
                            />}
                </Card>

                {/* 会员消费提示 */}
                <Cell
                    className="vip-tip-cell"
                    icon={<GoldCoin color="#ff4d4f" />}
                    title={<span style={{ color: '#ff4d4f' }}>会员消费更优惠，餐饮低至5折！</span>}
                    isLink
                />

            </div>

            {/* 底部结算栏 */}
            <SubmitBar
                price={isTotal ? (totalPrice / 2) * 100 : totalPrice * 100}  // 会员价半价 // 转换为分
                buttonText="立即支付"
                onSubmit={async () => {


                    if (orderInfo.payMethod == '支付宝支付') {
                        let res = await axios.post('http://localhost:3010/alipay', { price: totalPrice, name: "李家菜馆" });

                        alipayForm.current.innerHTML = res.data;
                        // 主动调用form表单
                        // document.forms 获取当前页面所有的表单集合
                        document.forms[0].submit();
                    } else if (orderInfo.payMethod == '会员卡支付') {
                        
                        let list = pricelist.find(e => e.cid == localStorage.getItem('id'))
                        console.log(list);
                        const vipform = pricelist.find(e => e.cid == localStorage.getItem('id'))
                        if (vipform.price - totalPrice < 0) {
                            Dialog.confirm({
                                title: '提示',
                                message: 'VIP卡余额不足请进行充值,点击确认按钮进行充值',
                                onConfirm: () => navigate('/vip'),  // 跳转充值页
                            })
                            return;
                        }
                        axios.post(`http://localhost:3010/vipPriceEdit`, { _id: list._id, price: list.price - totalPrice/2 }).then(res => {
                            if (res.status == 200) {
                                Toast.success('购买成功')
                                navigate('/food')
                            }

                        })
                    }


                }}
                tip={
                    <div className="price-detail">
                        <span className="total-price">¥{totalPrice.toFixed(2)}</span>
                        <span className="price-detail-btn">明细 <Arrow /></span>
                    </div>
                }
            />

        </div >
    );
}